<%@ include file="/WEB-INF/jsp/Includes.jsp"%>

<html lang="en">
<head>
    <title id='Description'>jqxChart Line Series Example</title>
<%--     <link rel="stylesheet" href="<c:url value="/resources/js/jqwidgets/styles/jqx.base.css"/>" type="text/css" /> --%>
    <script type="text/javascript" src="<c:url value="/resources/js/jqwidgets/scripts/jquery-1.10.2.min.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/resources/js/jqwidgets/jqwidgets/jqxcore.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/resources/js/jqwidgets/jqwidgets/jqxdata.js" /> "></script>
    <script type="text/javascript" src="<c:url value="/resources/js/jqwidgets/jqwidgets/jqxdraw.js" /> "></script>
    <script type="text/javascript" src="<c:url value="/resources/js/jqwidgets/jqwidgets/jqxchart.core.js" /> "></script>
    <script type="text/javascript">
        
        	
           
// Datos que tengo que mandar desde el controlador
// Start
            var data = new Array();
            <c:forEach items="${data}" var="dataI">
	            var item = new Object();
	            item["Date"] = '${dataI["Date"]}';
	            <c:forEach items="${series}" var="serie">
	            	item["${serie.dataField}"] =  '${dataI[serie.dataField]}';
	            </c:forEach>
	            data.push(item);
            </c:forEach>
            
            var series = new Array();
            <c:forEach items="${series}" var="serie">
            var item = new Object();
            item["dataField"] = '${serie.dataField}';
            item["displayText"] =  '${serie.displayText}';
            series.push(item);
            </c:forEach>
            
            var titulo = "${titulo}"
            var descripcion = "${descripcion}";
            var tipoSerie = "${tipoSerie}";
            var yDescripcion = "${yDescripcion}";
// End

$(document).ready(function () {
            var months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dec'];
            // prepare jqxChart settings
            var settings = {
                title: titulo,
                description: descripcion,
                enableAnimations: true,
                showLegend: true,
                padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                //source: dataAdapter,
                source: data,
                xAxis:
                {
                    dataField: 'Date',
                    formatFunction: function (value) {
                        return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
                    },
                    type: 'date',
                    baseUnit: 'month',
                    showTickMarks: true,
                    tickMarksInterval: 1,
                    tickMarksColor: '#888888',
                    unitInterval: 1,
                    showGridLines: true,
                    gridLinesInterval: 3,
                    gridLinesColor: '#888888',
                    valuesOnTicks: true,
//                     minValue: '01-01-2011',
//                     maxValue: '01-01-2012',
                    textRotationAngle: -45,
                    textRotationPoint: 'topright',
                    textOffset: {x: 0, y: -25}
                    
                },
                colorScheme: 'scheme08',
                seriesGroups:
                    [
                        {
                            type: tipoSerie,
                            valueAxis:
                            {
                                unitInterval: 2,
//                                 minValue: 0,
//                                 maxValue: 3000,
                                displayValueAxis: true,
                                description: yDescripcion,
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: series
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:850px; height:500px">
    </div>
</body>
</html>
